<template>
	<view class="packageCard">
		<view 
            class="card-box" 
            :class="active === item.type_number ? 'active' : ''"
		    v-for="(item, index) in packageCardInfo" 
		    :key="item.type_number" 
		    @click="clickCard(index, item)"
        >
			<view class="header">
				{{ item.type_name }}
				<text>￥{{ item.type_price }}/人起</text>
			</view>
			<view class="content">
				<text>{{ item.type_title }}</text>
				<text class="lb-content">{{ item.type_content }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
	packageCardInfo: {
		type: Array,
		default: []
	},
	type_number: {
		type: String,
		default: ''
	}
});
const emits = defineEmits(['click']);
const active = ref(0);

// 监听父组件的 type_number
watch(
	() => props.type_number,
	(newVal) => {
		const index = props.packageCardInfo.findIndex(
			(item) => item.type_number === newVal
		);
		if (index !== -1) {
			active.value = props.packageCardInfo[index].type_number;
		}
	}
);

const clickCard = (index, item) => {
	active.value = item.type_number;
	emits('click', item);
};
</script>

<style scoped>
.packageCard {
	margin: 0 20rpx;
	font-family: "仓耳渔阳体 W05";
	padding: 14rpx 4rpx;
	border-radius: 14rpx;
	box-sizing: border-box;
}
.card-box {
	margin-top: 24rpx;
	padding: 30rpx 32rpx;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 14rpx;
	border: 4rpx solid rgba(255, 255, 255, 1);
}
.header {
	font-weight: 600;
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
}
.header text {
	font-size: 24rpx;
}
.active {
	/* background-color: #f2f5fe; */
	border: 4rpx solid #044bad;
	/* color: #044bad; */
}
.content {
	display: flex;
	gap: 10rpx;
	flex-direction: column;
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(138, 138, 138, 1);
}
.content .lb-conten{
	white-space: pre-wrap;
}
</style>
